<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <PageTools :title="title">
        <el-button size="small" type="success" @click="$router.push('/import')">excel导入</el-button>
        <el-button size="small" type="danger" @click="exportData">excel导出</el-button>
        <el-button size="small" type="primary" @click="isShowDialog= true">新增员工</el-button>
      </PageTools>

      <!-- 表格区域 -->
      <el-card>
        <el-table v-loading="loading" border="" :data="list">
          <el-table-column type="index" label="序号" sortable="" />
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="sho" label="头像" sortable="">

            <img slot-scope="{row}" v-imagerror="dafaultImage" :src="row.staffPhoto||dafaultImage" alt="" style="border-radius: 50%; width: 100px; height: 100px; padding: 10px" @click="showQrCode(row.staffPhoto)">

          </el-table-column>
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <el-table-column prop="formOfEmployment" label="聘用形式" sortable="" :formatter="formatEmployment">
            <!-- <span slot-scope="scope">
              {{ scope.row.formOfEmployment===1? '正式':'临时' }}
            </span> -->
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <span slot-scope="scope">
              {{ scope.row.timeOfEntry|filtTime }}
            </span>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template slot-scope="scope">
              <el-switch
                :value="!!scope.row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </template>

          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="getRole(scope.row.id)">角色</el-button>
              <el-button type="text" size="small" @click="deleFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <el-row type="flex" justify="center" align="middle" style="height:60px">
          <el-pagination layout="prev, pager, next" :page="page.page" :total="page.total" :page-size="page.size" @current-change="currentChange" />
        </el-row>
      </el-card>
      <!--新增员工 弹层区域 -->
      <Dialog
        :dialog-visible.sync="isShowDialog"
        @addFn="getEmployeeList"
      />
      <!-- 二维码弹层 -->
      <el-dialog title="二维码" :visible.sync="isShowEM">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>
      <!-- 分配角色弹层 -->
      <AssingRole
        ref="AssingRole"
        :show-role-dialog.sync="showRoleDialog"
        :user-id="userId"
      />
    </div>
  </div>
</template>

<script>
// 如何渲染页面
// 1.定义接口
// 2.引入接口
// 3.定义methods方法，在方法里调用接口
// 4.在恰当的时机调用methods方法
// 5.在data里定义存放数据的容器，用来接收返回值
// 6.data绑定在页面上
import { getEmployeeList, delEmployee } from '@/api/employees'
import employeeEnum from '@/api/constant/employees'
import Dialog from './components/dialog.vue'
import QrCode from 'qrcode'
import AssingRole from './components/assign-role.vue'

export default {
  // 时间过滤器
  filters: {
    filtTime(value) {
      return value?.split('T')[0]
    }
  },
  components: {
    Dialog,
    AssingRole
  },
  data() {
    return {
      showRoleDialog: false, // 分配角色弹层
      isShowEM: false, // 二维码弹层
      dafaultImage: require('@/assets/common/head.jpg'),
      page: {
        page: 1, // 地几页
        size: 5, // 请求条数（每页）
        total: 0 // 总数
      },
      list: [], // 员工列表
      loading: false, // 加载
      isShowDialog: false,
      userId: null
    }
  },
  computed: {
    title() {
      return `总共${this.page.total}条数据`
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 请求员工信息
    async getEmployeeList() {
      this.loading = true
      const { rows, total } = await getEmployeeList(this.page)
      this.list = rows // 员工列表
      this.page.total = total // 员工总数
      // console.log(this.list)
      this.loading = false
    },
    // 换页
    currentChange(val) {
      this.loading = true
      this.page.page = val
      this.getEmployeeList(this.page)
      this.loading = false
    },
    // 表格格式化内容
    formatEmployment(row, colum, cellValue, index) {
      // 行数据  列属性  格式化前数据  索引
      // 格式化参照的映射规则叫做枚举
      return employeeEnum.hireType.find(item => item.id === cellValue)?.value || '未知'
    },
    // 删除员工
    deleFn(id) {
      // 二次确认
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 后端更新
        await delEmployee(id)
        // 前端更新
        this.getEmployeeList()
        // 提示用户
        this.$message.success('删除成功')
      })
    },
    // 导出
    exportData() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 定义枚举关系
        const headers = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '转正日期': 'correctionTime',
          '工号': 'workNumber',
          '部门': 'departmentName'
        }
        // 拿到所有的数据
        const { rows } = await getEmployeeList({ page: 1, size: this.page.total })

        // 处理成要导出的数据
        const data = rows.map(item => {
          return Object.values(headers).map(k => {
            if (k === 'timeOfEntry' || k === 'correctionTime') {
              // 格式化时间
              return item[k]?.split('T')[0]
            }
            if (k === 'formOfEmployment') {
              // 格式化聘用形式
              return employeeEnum.hireType.find(obj => obj.id === item[k])?.value || '未知'
            }
            return item[k]
          })
        })
        // console.log(data)
        excel.export_json_to_excel({
          header: Object.keys(headers), // 表头
          data // 具体数据

        })
      })
    },
    // 转化二维码
    showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        this.isShowEM = true
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.myCanvas, url)
          // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    },
    // 设置角色
    async getRole(id) {
      this.userId = id
      this.$refs.AssingRole.getUserDetailById(id)
      // 异步请求数据后再打开弹层
      this.showRoleDialog = true
    }
  }

}
</script>

<style>

</style>
